// 要求把./file/index.html拆分成css,html,script三个文件存放在./ok文件夹中,在html文件中引入css和js

// 导入文件模块
const fs = require('fs')
// 导入路径模块
const path = require('path')

// 定义正则表达式，分别匹配<style></style>和<script></script> 标签
// 其中\s表示空白字符: \S 表示非空白字符;* 表示四配任意次
const regStyle = /<style>[\s\S]*<\/style>/

const regScript = /<script>[\s\S]*<\/script>/

// 读取index.html文件
fs.readFile(path.join(__dirname, './file/index.html'), 'utf8', function (err, dataStr) {
    // 读取失败处理
    if (err) {
        return console.log('读取文件失败');
    }
    // 读取成功后调用三个方法，分别拆解出css,js,html文件
    resolveCss(dataStr)
    resolveJs(dataStr)
    resolveHtml(dataStr)
})

// 定义处理css样式的方法
function resolveCss(htmlStr) {
    // 使用正则提取需要的内容
    //  正则表达式.exec(要匹配的内容)   exec() 方法用于检索字符串中的正则表达式的匹配。如果字符串中有匹配的值返回该匹配值，返回值是一个数组，内容在下标为0的地方。否则返回 null。
    const r1 = regStyle.exec(htmlStr)
    const newCss = r1[0].replace('<style>', '').replace('</style>', '')// 去掉首尾标签
    // 把处理好的结果写入文件中
    fs.writeFile(path.join(__dirname, './ok/index.css'), newCss, function (err) {
        if (err) { return console.log('css脚本写入失败'); }
        console.log('css脚本写入成功');
    })

}
// 定义处理js的方法
function resolveJs(htmlStr) {
    // 使用正则提取需要的内容
    //  正则表达式.exec(要匹配的内容)   exec() 方法用于检索字符串中的正则表达式的匹配。如果字符串中有匹配的值返回该匹配值，返回值是一个数组，内容在下标为0的地方。否则返回 null。
    const r2 = regScript.exec(htmlStr)
    const newJs = r2[0].replace('<script>', '').replace('</script>', '')// 去掉首尾标签


    // 把处理好的结果写入文件中
    fs.writeFile(path.join(__dirname, './ok/index.js'), newJs, function (err) {
        if (err) { return console.log('js脚本写入失败'); }
        console.log('js脚本写入成功');
    })


}
// 定义处理html的方法
function resolveHtml(htmlStr) {
    // 把内嵌的style 和script 标签，替换为外联的link 和script 标签
    const newHtml = htmlStr.replace(regStyle, '<link rel="stylesheet" href="./index.css" />').replace(regScript, '<script src="./index.js"></script>')
    // 把处理好的结果写入文件中
    fs.writeFile(path.join(__dirname, './ok/index.html'), newHtml, function (err) {
        if (err) { return console.log('html写入失败'); }
        console.log('html写入成功');
    })

}
